<template>
  <div>
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container">
       <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                  <el-tab-pane label="生成请求" name="first">
                    <GenReqContainer></GenReqContainer>
                  </el-tab-pane>
                  <el-tab-pane label="去除转义/unicode编码" name="second">
                    <DelZhuanYiContainer></DelZhuanYiContainer>
                  </el-tab-pane>
                  <el-tab-pane label="替换" name="third">
                    <ReplaceContainer></ReplaceContainer>
                  </el-tab-pane>
                  <el-tab-pane label="文件上传" name="fourth">
                    <UploadContainer></UploadContainer>
                  </el-tab-pane>

                  <el-tab-pane label="URL编码/解码" name="fifth">
                      <EncodDecodeContainer></EncodDecodeContainer>
                  </el-tab-pane>

                  <el-tab-pane label="Excel2Json" name="sixth">
                        <ExcelToJSONContainer></ExcelToJSONContainer>
                  </el-tab-pane>

                </el-tabs>
      </div>
    </div>
    

<!--     
    <div class="content">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>

                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the card's
                  content.
                </p>

                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
              </div>
            </div>

            <div class="card card-primary card-outline">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>

                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the card's
                  content.
                </p>
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
              </div>
            </div>
          </div>
          
          <div class="col-lg-6">
            <div class="card">
              <div class="card-header">
                <h5 class="m-0">Featured</h5>
              </div>
              <div class="card-body">
                <h6 class="card-title">Special title treatment</h6>

                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>

            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Default Card Example</h3>
                <div class="card-tools">
                  
                  <span class="badge badge-primary">Label</span>
                </div>
              
              </div>
              
              <div class="card-body">
                The body of the card
              </div>
              
              <div class="card-footer">
                The footer of the card
              </div>
              
            </div>


          </div>
          
        </div>
        <div class="row">
          <div class="col-lg-10">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Handle</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        
      </div>


    </div> -->
    <!-- /.content -->
  </div>
</template>

<script>
import GenReqContainer from '@/components/Tools/GenReq';
import ReplaceContainer from '@/components/Tools/Replace';
import UploadContainer from '@/components/Tools/Upload';
import DelZhuanYiContainer from '@/components/Tools/DelZhuanYi';
import EncodDecodeContainer from '@/components/Tools/EncodeDecode';
import ExcelToJSONContainer from '@/components/Tools/ExcelToJSON';
import { ref } from "vue";
export default {
  name: "MainContainer",
  components: {
    GenReqContainer,
    ReplaceContainer,
    UploadContainer,
    DelZhuanYiContainer,
    EncodDecodeContainer,
    ExcelToJSONContainer
  },
  setup() {
    const activeName = ref('first')

    const handleClick = (tab, event) => {
      console.log(tab, event);
    };
    return {
      handleClick,
      activeName
    }
  }
}
</script>

<style scoped></style>